<template>
<view>
  <!-- 未申请 -->
  <view class="main" v-if="userInfo.state === 0 && applyInfo.state === 3">
    <view class="iconfont icon-yunweiFAQ"></view>
    <view class="tip">申请接单常见问题说明</view>
    <view class="item">
      <view class="left">姓名：</view>
      <input type="text" v-model="name" placeholder="你的名字" />
    </view>
    <view class="item">
      <view class="left">学号：</view>
      <input type="text" v-model="studentNum" placeholder="你的学号" />
    </view>
    <view class="updataText">相关文件证明:</view>
    <view class="upload" @click="updatetext">
      <view class="uploadFile" v-if="student_crad_pic">
		<!-- <image :src="student_crad_pic" mode="" v-if="student_crad_pic"></image> -->
		<image :src="student_crad_pic"></image>
	  </view>
      <view class="image" v-else>
		  +
      </view>
    </view>
    <view class="tip">点击复制管理员微信进行加急审核</view>
    <view class="linkItem">
      <view class="itemLeft">
        <view class="text iconfont icon-laba">电子协议</view>
      </view>
      <view class="itemRig iconfont icon-arrow-right-copy-copy-copy"></view>
    </view>
    <button hover-class="submit" @click="submit">提交申请</button>
  </view>
  
  <!-- 申请中 -->
  <view v-if="userInfo.state === 0 && applyInfo.state === 0" class="info">
    <view style="text-align: center; font-size: 36rpx; font-weight: 600;">
      申请信息
    </view>
    <view>
      姓名：{{ applyInfo.name }}
      <text style="background-color: #2fadd3;">申请中</text>
    </view>
    <view>
      学号：{{ applyInfo.studentNum }}
    </view>
    <view>
      学生证：
      <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
    </view>
  </view>
  
  <!-- 申请通过 -->
  <view v-if="userInfo.state === 1 && applyInfo.state === 1" class="info">
    <view style="text-align: center; font-size: 36rpx; font-weight: 600;">
      申请信息
    </view>
    <view>
      姓名：{{ userInfo.real_name }}
      <text style="background-color: #2fadd3;">申请成功</text>
    </view>
    <view>
      学号：{{ userInfo.studentNum }}
    </view>
    <view>
      学生证：
      <image :src="userInfo.student_crad_pic" alt="" mode="widthFix"/>
    </view>
  </view>
  
  <!-- 申请失败 -->
  <view v-if="userInfo.state === 0 && applyInfo.state === 2" class="info">
    <view style="text-align: center; font-size: 36rpx; font-weight: 600;">
      申请信息
    </view>
    <view>
      姓名：{{ applyInfo.name }}
      <text style="background-color: #2fadd3;">申请失败</text>
    </view>
    <view>
      学号：{{ applyInfo.studentNum }}
    </view>
    <view>
      学生证：
      <image :src="applyInfo.student_crad_pic" alt="" mode="widthFix"/>
    </view>
  </view>
</view>
</template>

<script>
import { apply, applyState } from "../../api/index"
export default {
  data() {
    return {
      userInfo: null,
      applyInfo: {
        state: ''
      },
      student_crad_pic: "",
      name: "",
      studentNum: "",
    }
  },
  created() {
    this.userInfo = uni.getStorageSync('userInfo');
    this.getApply()
  },
  methods: {
	  //查看申请状态
    getApply() {
      applyState(this.userInfo.id).then(res => {
        console.log(res);
        if (res.data.status === 0) {
          this.applyInfo = res.data.apply[0];
          this.userInfo = {
            ...this.userInfo,
            real_name: res.data.apply[0].name,
            studentNum: res.data.apply[0].studentNum,
            student_crad_pic: res.data.apply[0].student_crad_pic
          }
		  // console.log(this.userInfo,8888);
		  //存储姓名 学号 学生证到userinfo
          uni.setStorageSync('userInfo', this.userInfo);
		  // console.log()
        } else {
          this.applyInfo.state = 3;
          uni.showToast({
            title: "未申请"
          });
        }
      })
    },
    submit() {
      let obj = {
        name: this.name,
        studentNum: this.studentNum,
        student_crad_pic: this.student_crad_pic,
        users_id: uni.getStorageSync("userInfo").id
      };
      apply(obj).then(res => {
        if (res.data.status === 0) {
          uni.showToast({
            title: "提交申请成功"
          });
          this.applyInfo.state = 0; // 更新申请状态为申请中
        } else {
          uni.showToast({
            title: "申请失败"
          });
          this.applyInfo.state = 2; // 更新申请状态为申请失败
        }
      })
    },
    updatetext() {
      uni.chooseMessageFile({
        count: 1,
        type: "image",
        success: (res) => {
          let imageUrl = res.tempFiles[0].path;
          uni.uploadFile({
			url:"http://8.140.198.52:8001/common/uploadFile",
            filePath: imageUrl,
            name: "file",
            header: {
              "Authorization": uni.getStorageSync("token"),
              'content-type': 'multipart/form-data',
            },
            success: (uploadRes) => {
              this.student_crad_pic = uploadRes.data; // 更新学生证图片地址
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.main{
		width: 90%;
		background-color: #fff;
		margin: 60rpx auto;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
	}
	.icon-tianjiabiaodan{
		text-align: center;
		font-size: 100rpx;
		color: #085fd0;
		margin-top: -68rpx;
	}
	.tip{
		border: 1px solid #1e6ed0;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #e7eff9;
		color: #4b7dd9;
		border-radius: 10rpx;
		width: 90%;
		margin: 0 auto;
	}
	.item{
		border-bottom: 1px solid #ddd;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.item input{
		direction: rtl;
	}
	.updataText{
		padding: 20rpx 0  8rpx;
	}
	.uploadFile ,.image{
		width: 100%;
		margin: 10rpx auto;
		border: 1px dashed #878787;
		height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #878787;
		font-size: 64rpx;
		border-radius: 10rpx;
		overflow:hidden;
		margin-bottom: 30rpx;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.linkItem {
		width: 100%;
		background-color: #fff;
		height: 88rpx;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		border-bottom:1px solid #ddd ;
	}
	button{
		background-color: #0f67d0;
		color: #fff;
	}
</style>
